<template>
    <div>
        <el-tree
            ref="treeRef"
            :data="authList"
            show-checkbox
            node-key="roleId"
            :check-strictly="true"
            :default-checked-keys="checkedNodes"
            :props="{ label: 'name', children: 'roleList' }"
        />
        <el-button type="primary" @click="handleChangeAuth">修改权限</el-button>
    </div>
</template>
<script lang="ts" setup>
import { getAuthList } from '@/api/auth';
const route = useRoute();
interface IAuth {
    name: string; //权限名称
    roleId: number; //角色ID
    roleList?: IAuth[]; //角色列表 子权限
}
const treeRef = ref<any>(null);
let authList = ref<IAuth[]>([]);
const checkedNodes = ref<number[]>([]);
const { query } = route;
if (query.auth) {
    checkedNodes.value = query.auth as [];
}
onMounted(() => {
    getAuthList().then((res) => {
        authList.value = res.data;
    });
});
const handleChangeAuth = () => {
    const selectedTreeNode = treeRef.value.getCheckedNodes();
    console.log(selectedTreeNode);
};
</script>
